<!DOCTYPE html>
<html lang="en">
<head>        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    
    <!--[if gt IE 8]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <![endif]-->        
    
    <title>Form elements - Virgo Responsive Bootstrap3 Admin Template</title>
    
    <link href="css/stylesheets.css" rel="stylesheet" type="text/css" />      
    <!--[if lt IE 10]>
        <link href="css/ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->        
    <link rel="icon" type="image/ico" href="favicon.ico"/>
    
    <script type='text/javascript' src='js/plugins/jquery/jquery.min.js'></script>
    <script type='text/javascript' src='js/plugins/jquery/jquery-ui-1.10.1.custom.min.js'></script>
    <script type='text/javascript' src='js/plugins/jquery/jquery-migrate-1.1.1.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/jquery/globalize.js'></script>
    <script type='text/javascript' src='js/plugins/other/excanvas.js'></script>
   
    <script type='text/javascript' src='js/plugins/other/jquery.mousewheel.min.js'></script>
        
    <script type='text/javascript' src='js/plugins/bootstrap/bootstrap.min.js'></script>            
    
    <script type='text/javascript' src='js/plugins/cookies/jquery.cookies.2.2.0.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/fancybox/jquery.fancybox.pack.js'></script>
    
    <script type='text/javascript' src='js/plugins/jflot/jquery.flot.js'></script>    
    <script type='text/javascript' src='js/plugins/jflot/jquery.flot.stack.js'></script>    
    <script type='text/javascript' src='js/plugins/jflot/jquery.flot.pie.js'></script>
    <script type='text/javascript' src='js/plugins/jflot/jquery.flot.resize.js'></script>
    
    <script type='text/javascript' src='js/plugins/epiechart/jquery.easy-pie-chart.js'></script>
    <script type='text/javascript' src='js/plugins/knob/jquery.knob.js'></script>
    
    <script type='text/javascript' src='js/plugins/sparklines/jquery.sparkline.min.js'></script>    
    
    <script type='text/javascript' src='js/plugins/pnotify/jquery.pnotify.min.js'></script>
    
    <script type='text/javascript' src='js/plugins/fullcalendar/fullcalendar.min.js'></script>        
    
    <script type='text/javascript' src='js/plugins/datatables/jquery.dataTables.min.js'></script>    
    
    <script type='text/javascript' src='js/plugins/wookmark/jquery.wookmark.js'></script>        
    
    <script type='text/javascript' src='js/plugins/jbreadcrumb/jquery.jBreadCrumb.1.1.js'></script>
    
    <script type='text/javascript' src='js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js'></script>
    
    <script type='text/javascript' src="js/plugins/uniform/jquery.uniform.min.js"></script>
    <script type='text/javascript' src="js/plugins/select/select2.min.js"></script>
    <script type='text/javascript' src='js/plugins/tagsinput/jquery.tagsinput.min.js'></script>
    <script type='text/javascript' src='js/plugins/maskedinput/jquery.maskedinput-1.3.min.js'></script>
    <script type='text/javascript' src='js/plugins/multiselect/jquery.multi-select.min.js'></script>    
    
    <script type='text/javascript' src='js/plugins/validationEngine/languages/jquery.validationEngine-en.js'></script>
    <script type='text/javascript' src='js/plugins/validationEngine/jquery.validationEngine.js'></script>        
    <script type='text/javascript' src='js/plugins/stepywizard/jquery.stepy.js'></script>
        
    <script type='text/javascript' src='js/plugins/animatedprogressbar/animated_progressbar.js'></script>
    <script type='text/javascript' src='js/plugins/hoverintent/jquery.hoverIntent.minified.js'></script>
    
    <script type='text/javascript' src='js/plugins/media/mediaelement-and-player.min.js'></script>    
    
    <script type='text/javascript' src='js/plugins/cleditor/jquery.cleditor.js'></script>
    
    <script type='text/javascript' src='js/plugins/shbrush/XRegExp.js'></script>
    <script type='text/javascript' src='js/plugins/shbrush/shCore.js'></script>
    <script type='text/javascript' src='js/plugins/shbrush/shBrushXml.js'></script>
    <script type='text/javascript' src='js/plugins/shbrush/shBrushJScript.js'></script>
    <script type='text/javascript' src='js/plugins/shbrush/shBrushCss.js'></script>    
        
    <script type='text/javascript' src='js/plugins/filetree/jqueryFileTree.js'></script>
    
    <script type='text/javascript' src='js/plugins/slidernav/slidernav-min.js'></script>    
    <script type='text/javascript' src='js/plugins/isotope/jquery.isotope.min.js'></script>    
    <script type='text/javascript' src='js/plugins/jnotes/jquery-notes_1.0.8_min.js'></script>
    <script type='text/javascript' src='js/plugins/jcrop/jquery.Jcrop.min.js'></script>
    <script type='text/javascript' src='js/plugins/ibutton/jquery.ibutton.min.js'></script>

    <script type='text/javascript' src='js/plugins/scrollup/jquery.scrollUp.min.js'></script>    
    
    <script type='text/javascript' src='js/plugins.js'></script>
    <script type='text/javascript' src='js/charts.js'></script>
    <script type='text/javascript' src='js/actions.js'></script>
    
</head>
<body>
    
    <div class="header">
        <a href="index.html" class="logo"></a>
        
        <div class="buttons">
            <div class="popup" id="subNavControll">
                <div class="label"><span class="icos-list"></span></div>
            </div>
            <div class="dropdown">
                <div class="label"><span class="icos-user2"></span></div>
                <div class="body" style="width: 160px;">
                    <div class="itemLink">
                        <a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a>
                    </div>
                    <div class="itemLink">
                        <a href="#"><span class="glyphicon glyphicon-comment"></span> Messages</a>
                    </div>                    
                    <div class="itemLink">
                        <a href="#"><span class="glyphicon glyphicon-off"></span> Logoff</a>
                    </div>                                        
                </div>                
            </div>            
            <div class="popup">
                <div class="label"><span class="icos-search1"></span></div>
                <div class="body">
                    <div class="arrow"></div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">                    
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>                                    
                                    <input type="text" name="search" placeholder="Keyword..." class="form-control"/>
                                    <div class="input-group-btn">
                                        <button class="btn btn-default" type="button">Search</button>
                                    </div>
                                </div>                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="popup">
                <div class="label"><span class="icos-cog"></span></div>
                <div class="body">
                    <div class="arrow"></div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                <span class="help-block">Themes:</span>
                                <div class="themes">
                                    <a href="#" data-theme="" class="tip" title="Default"><img src="img/themes/default.jpg"/></a>                                    
                                    <a href="#" data-theme="ssDaB" class="tip" title="DaB"><img src="img/themes/dab.jpg"/></a>
                                    <a href="#" data-theme="ssTq" class="tip" title="Tq"><img src="img/themes/tq.jpg"/></a>
                                    <a href="#" data-theme="ssGy" class="tip" title="Gy"><img src="img/themes/gy.jpg"/></a>
                                    <a href="#" data-theme="ssLight" class="tip" title="Light"><img src="img/themes/light.jpg"/></a>
                                    <a href="#" data-theme="ssDark" class="tip" title="Dark"><img src="img/themes/dark.jpg"/></a>
                                    <a href="#" data-theme="ssGreen" class="tip" title="Green"><img src="img/themes/green.jpg"/></a>
                                    <a href="#" data-theme="ssRed" class="tip" title="Red"><img src="img/themes/red.jpg"/></a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-12">
                                <span class="help-block">Backgrounds:</span>
                                <div class="backgrounds">
                                    <a href="#" data-background="bg_default" class="bg_default"></a>
                                    <a href="#" data-background="bg_mgrid" class="bg_mgrid"></a>
                                    <a href="#" data-background="bg_crosshatch" class="bg_crosshatch"></a>
                                    <a href="#" data-background="bg_hatch" class="bg_hatch"></a>                                    
                                    <a href="#" data-background="bg_light_gray" class="bg_light_gray"></a>
                                    <a href="#" data-background="bg_dark_gray" class="bg_dark_gray"></a>
                                    <a href="#" data-background="bg_texture" class="bg_texture"></a>
                                    <a href="#" data-background="bg_light_orange" class="bg_light_orange"></a>
                                    <a href="#" data-background="bg_yellow_hatch" class="bg_yellow_hatch"></a>                        
                                    <a href="#" data-background="bg_green_hatch" class="bg_green_hatch"></a>                        
                                </div>
                            </div>          
                        </div>
                        <div class="form-group">
                            <div class="col-md-12">
                                <span class="help-block">Navigation:</span>
                                <input type="radio" name="navigation" id="fixedNav"/> Fixed 
                                <input type="radio" name="navigation" id="collapsedNav"/> Collapsible
                                <input type="radio" name="navigation" id="hiddenNav"/> Hidden
                            </div>                                
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        
    </div>
    
    <div class="navigation">

        <ul class="main">
            <li><a href="index.html"><span class="icom-screen"></span><span class="text">Main</span></a></li>
            <li><a href="#ui"><span class="icom-bookmark"></span><span class="text">UI elements</span></a></li>
            <li><a href="#forms" class="active"><span class="icom-pencil3"></span><span class="text">Forms stuff</span></a></li>
            <li><a href="#tables"><span class="icom-newspaper"></span><span class="text">Tables</span></a></li>
            <li><a href="#media"><span class="icom-videos"></span><span class="text">Media & Files</span></a></li>            
            <li><a href="#stats"><span class="icom-stats-up"></span><span class="text">Statistic</span></a></li>
            <li><a href="typography.html"><span class="icom-clipboard1"></span><span class="text">Typography</span></a></li>
            <li><a href="#samples"><span class="icom-box-add"></span><span class="text">Samples</span></a></li>
            <li><a href="#other"><span class="icom-star1"></span><span class="text">Other</span></a></li>            
        </ul>
        
        <div class="control"></div>        
        
        <div class="submain">                                 
            
            <div id="default">
                
                <div class="widget-fluid userInfo clearfix">
                    <div class="image">
                        <img src="img/examples/users/dmitry.jpg" class="img-thumbnail"/>
                    </div>              
                    <div class="name">Welcom, Dmitry</div>
                    <ul class="menuList">
                        <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-comment"></span> Messages</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-share-alt"></span> Logoff</a></li>                        
                    </ul>
                    <div class="text">
                        Welcom back! Your last visit: 24.10.2012 in 19:55
                    </div>
                </div>
                
                <div class="widget-fluid TAC">
                    <div class="epc mini">
                        <div class="epcm-red" data-percent="56"><span>80</span>%</div>
                        <div class="label label-danger">Storage</div>
                    </div>                    
                    <div class="epc mini">
                        <div class="epcm-green" data-percent="95"><span>1890</span>/2000</div>
                        <div class="label label-success">Inbox</div>
                    </div>                             
                </div>                
                <div class="dr"><span></span></div>
                <div class="widget">
                    <button class="btn btn-primary btn-block">Button block</button>
                </div>                
                <div class="widget">
                    <button class="btn btn-warning btn-block">Some another button</button>
                </div>
                <div class="dr"><span></span></div>
                <ul class="fmenu">
                    <li>
                        <a href="#">Submenu level 2</a>                        
                    </li>
                    <li>
                        <a href="#">Submenu level 2</a>
                        <span class="caption dark">5</span>
                        <ul>
                            <li><a href="#">Submenu level 3</a><span class="caption">1</span></li>
                            <li><a href="#">Submenu level 3</a><span class="caption red">2</span></li>
                            <li><a href="#">Submenu level 3</a><span class="caption green">3</span></li>
                            <li><a href="#">Submenu level 3</a><span class="caption orange">4</span></li>
                            <li><a href="#">Submenu level 3</a><span class="caption purple">5</span></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Submenu level 2</a>                        
                    </li>                    
                </ul>                
                <div class="dr"><span></span></div>
                <div class="menu">
                    <a href="#">Submenu 1</a>
                    <a href="#">Submenu 2</a>
                    <a href="#">Submenu 3</a>
                    <a href="#">Submenu 4</a>
                    <a href="#">Submenu 5</a>
                </div>
                <div class="dr"><span></span></div>
            </div>           
            
            <div id="ui">
                
                <div class="menu">
                    <a href="ui.html"><span class="glyphicon glyphicon-user"></span> Interface</a>
                    <a href="buttons.html"><span class="glyphicon glyphicon-chevron-right"></span> Buttons set</a>
                    <a href="widgets.html"><span class="glyphicon glyphicon-th-large"></span> Widgets</a>                    
                    <a href="icons.html"><span class="glyphicon glyphicon-fire"></span> Icons</a>
                    <a href="grid.html"><span class="glyphicon glyphicon-th"></span> Grid system</a>
                    <a href="dnd.html"><span class="glyphicon glyphicon-move"></span> Drug and drop</a>
                </div>                                           
                
                <div class="dr"><span></span></div>                
                <div class="widget">
                    <button class="btn btn-primary btn-block">Button block</button>
                </div>                
                <div class="dr"><span></span></div>
                <div class="widget-fluid">
                    <div class="accordion">
                        <h3>Section 1</h3>
                        <div>
                            <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
                        </div>
                        <h3>Section 2</h3>
                        <div>
                            <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
                        </div>
                        <h3>Section 3</h3>
                        <div>
                            <ul>
                                <li>List item one</li>
                                <li>List item two</li>
                                <li>List item three</li>
                            </ul>                                
                            <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
                        </div>                            
                    </div>                
                </div>
                <div class="dr"><span></span></div>
                <div class="widget">
                    <span>Default:</span>
                    <div class="progress small">
                        <div class="progress-bar progress-bar-info tip" style="width: 30%;" data-original-title="30%"></div>
                    </div>                                
                    <span>Success:</span>
                    <div class="progress small">
                        <div class="progress-bar progress-bar-success tip" style="width: 50%;" data-original-title="50%"></div>
                    </div>
                    <span>Warning:</span>
                    <div class="progress small">
                        <div class="progress-bar progress-bar-warning tip" style="width: 70%;" data-original-title="70%"></div>
                    </div>       
                    <span>Danger:</span>
                    <div class="progress small">
                        <div class="progress-bar progress-bar-danger tip" style="width: 90%;" data-original-title="90%"></div>
                    </div>                                 
                </div>
                <div class="dr"><span></span></div>
                
            </div>
            
            <div id="forms">
                                                
                <div class="menu">
                    <a href="forms.html" class="active"><span class="glyphicon glyphicon-align-justify"></span> Form elements</a>
                    <a href="validation.html"><span class="glyphicon glyphicon-ok-sign"></span> Form validation</a>
                    <a href="wizard.html"><span class="glyphicon glyphicon-share"></span> Wizard</a>  
                    <a href="form_grid.html"><span class="glyphicon glyphicon-th"></span> Form grid system</a>
                    <a href="editor.html"><span class="glyphicon glyphicon-pencil"></span> Editors</a>
                    <a href="edit_image.html"><span class="glyphicon glyphicon-picture"></span> Image handling</a>
                </div>                                                
                
                <div class="dr"><span></span></div>
                <div class="widget-fluid">
                    <div class="form-group">
                        <span>Text:</span>
                        <input type="text" placeholder="Placeholder example" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <input type="checkbox" checked="checked" value="1"/>Checked 
                        <input type="checkbox" value="2"/>Unchecked                         
                    </div>                    
                    <div class="form-group">                        
                        <select>
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                    </div>                    
                    <div class="form-group">
                        <span>Tags</span>
                        <input class="tags" value="PHP,CSS"/>
                    </div>
                    <div class="form-group">                        
                        <textarea name="text"></textarea>
                    </div>                    
                    <div class="form-group TAR">
                        <button class="btn btn-primary">Submit</button>
                    </div>
                </div>
                <div class="dr"><span></span></div>  
                
            </div>                        

            <div id="tables">
                                                
                <div class="menu">
                    <a href="tables.html"><span class="glyphicon glyphicon-align-justify"></span> Default tables</a>
                    <a href="dynamic_tables.html"><span class="glyphicon glyphicon-ok-sign"></span> Dynamic tables</a>                          
                </div>                                                
                
                <div class="dr"><span></span></div>                
                <div class="widget-fluid">
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th width="50">ID</th>
                                <th>User</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>u-231</td>
                                <td><a href="#">Dmitry Ivaniuk</a></td>
                            </tr>
                            <tr>
                                <td>u-250</td>
                                <td><a href="#">Helen Symonchuk</a></td>
                            </tr>
                            <tr>
                                <td>u-256</td>
                                <td><a href="#">Olga Yukhimchuk</a></td>
                            </tr>                            
                            <tr>
                                <td>u-276</td>
                                <td><a href="#">Valentin Ratushev</a></td>
                            </tr>                                                        
                        </tbody>
                    </table>                    
                </div>
                <div class="dr"><span></span></div>                
                <div class="widget-fluid">
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th><input type="checkbox" class="checkall"/></th>
                                <th width="25%">ID</th>
                                <th width="75%">User</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" name="ch[]"/></td>
                                <td>u-231</td>
                                <td><a href="#">Dmitry Ivaniuk</a></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="ch[]"/></td>
                                <td>u-250</td>
                                <td><a href="#">Helen Symonchuk</a></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="ch[]"/></td>
                                <td>u-256</td>
                                <td><a href="#">Olga Yukhimchuk</a></td>
                            </tr>                            
                            <tr>
                                <td><input type="checkbox" name="ch[]"/></td>
                                <td>u-276</td>
                                <td><a href="#">Valentin Ratushev</a></td>
                            </tr>                                                        
                        </tbody>
                    </table>                    
                </div>  
                <div class="dr"><span></span></div>
                
            </div>              
            
            <div id="media">
                
                <div class="menu">
                    <a href="images.html"><span class="glyphicon glyphicon-picture"></span> Images</a>
                    <a href="videos.html"><span class="glyphicon glyphicon-film"></span> Videos</a>
                    <a href="files.html"><span class="glyphicon glyphicon-file"></span> File handling</a>                                                                           
                </div>                
                <div class="dr"><span></span></div>
                <div class="widget-fluid">
                    <div class="head">File Tree</div>
                    <div id="fileTree"></div>
                </div>
                <div class="dr"><span></span></div>
                
            </div>                          
            
            <div id="stats">
                
                <div class="menu">
                    <a href="charts.html"><span class="glyphicon glyphicon-signal"></span> Charts</a>                    
                    <a href="chart_widgets.html"><span class="glyphicon glyphicon-star"></span> Chart widgets</a>      
                </div>                
                <div class="dr"><span></span></div>
                <div class="widget-fluid TAC">
                    <div class="epc mini">
                        <div class="epcm-green" data-percent="56"><span>45</span>%</div>
                        <div class="label label-success">Server load</div>
                    </div>                    
                    <div class="epc mini">
                        <div class="epcm-orange" data-percent="40"><span>256</span>MB</div>
                        <div class="label label-warning">Used RAM</div>
                    </div>                             
                </div>
                <div class="dr"><span></span></div>
                <div class="widget-fluid">
                    <div class="row">
                        <div class="col-md-6 TAC">
                            <span class="spl">1:3,2:4,3:3,3:4,4:2</span>
                        </div>
                        <div class="col-md-6 TAC">
                            <span class="spb">5,6,4,6,5,4,5,6,8,5,6</span>
                        </div>
                    </div>
                </div>
                <div class="widget-fluid">    
                    <div class="row">
                        <div class="col-md-6 TAC">
                            <span class="spd">5,6,4,6,5,4,5,6,8,5,6</span>
                        </div>
                        <div class="col-md-6 TAC">
                            <span class="spp">5,2,3,2,1</span>
                        </div>
                    </div>                                        
                </div>
                <div class="dr"><span></span></div>                
            </div>              
            
            <div id="samples">
                <div class="menu">
                    <a href="profile.html"><span class="glyphicon glyphicon-user"></span> User profile</a>
                    <a href="stream.html"><span class="glyphicon glyphicon-refresh"></span> Stream activity</a>
                    <a href="mailbox.html"><span class="glyphicon glyphicon-envelope"></span> Mailbox</a>
                    <a href="invoice.html"><span class="glyphicon glyphicon-list-alt"></span> Invoice</a>
                    <a href="gallery.html"><span class="glyphicon glyphicon-picture"></span> Gallery</a>
                    <a href="users.html"><span class="glyphicon glyphicon-align-justify"></span> Users list</a>
                    <a href="contacts.html"><span class="glyphicon glyphicon-book"></span> Contacts list</a>
                    <a href="faq.html"><span class="glyphicon glyphicon-question-sign"></span> FAQ</a>
                    <a href="user_edit.html"><span class="glyphicon glyphicon-pencil"></span> User edit</a>
                    <a href="search.html"><span class="glyphicon glyphicon-search"></span> Search</a>                                        
                </div>                
            </div>

            <div id="other">
                <div class="menu">
                    <a href="login.html"><span class="glyphicon glyphicon-off"></span> Login page</a>
                    <a href="error_403.html"><span class="glyphicon glyphicon-warning-sign"></span> Error 403 Forbidden</a>
                    <a href="error_404.html"><span class="glyphicon glyphicon-warning-sign"></span> Error 404 Not found</a>
                    <a href="error_503.html"><span class="glyphicon glyphicon-warning-sign"></span> Error 503 Service Unavailable</a>                
                </div>
                
                <div class="widget">
                    <div class="alert alert-block">                
                        <strong>Alert block!</strong> Click me!:P
                    </div>
                    <div class="alert alert-error">            
                        <strong>Oh snap!</strong> Change a few... 
                    </div>
                    <div class="alert alert-success">            
                        <strong>Well done!</strong> Successfully...
                    </div>            
                    <div class="alert alert-info">            
                        <strong>Heads up!</strong> This alert...
                    </div>                  
                </div>
            </div>         
                                    
        </div>

    </div>
    
    <div class="breadCrumb clearfix">    
        <ul id="breadcrumbs">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Forms stuff</a></li>
            <li>Form elements</li>
        </ul>        
    </div>
    
    <div class="content">
                
        <div class="row">
            
            <div class="col-md-6">                

                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-pencil2"></i></div>
                        <h2>Default form elements</h2>
                    </div>                        
                    <div class="block-fluid">

                        <div class="form-group">
                            <div class="col-md-2">Input Text:</div>
                            <div class="col-md-10"><input type="text" placeholder="Placeholder example" class="form-control"/></div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-2">Input Password:</div>
                            <div class="col-md-10"><input type="password" value="inputpassword" class="form-control"/></div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-2">Readonly:</div>
                            <div class="col-md-10"><input type="text" value="Readonly value" readonly="readonly" class="form-control"/></div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-2">Disabled:</div>
                            <div class="col-md-10"><input type="text" value="Disabled value" disabled="disabled" class="form-control"/></div>
                        </div>                    
                        <div class="form-group">
                            <div class="col-md-2">Textarea:</div>
                            <div class="col-md-10"><textarea placeholder="Placeholder example" class="form-control"></textarea></div>
                        </div>

                        <div class="toolbar bottom TAL">
                            <button class="btn btn-primary">Submit</button>
                        </div>

                    </div>
                </div>
                
            </div>
            
            <div class="col-md-6">                

                <div class="widget">
                    <div class="head">
                        <div class="icon"><i class="icosg-heart1"></i></div>
                        <h2>Inputs with pre/appends</h2>
                    </div>                                    
                    <div class="block-fluid">

                        <div class="form-group">
                            <div class="col-md-2">Prepend:</div>
                            <div class="col-md-10">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                                    <input type="text" class="form-control"/>                               
                                </div>                  
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-2">Append:</div>
                            <div class="col-md-10">
                                <div class="input-group">                                
                                    <input type="text" class="form-control"/>
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                </div>                                                        
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-2">Both:</div>
                            <div class="col-md-10">                            
                                <div class="input-group">                                
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-fire"></i></span>
                                    <input type="text" class="form-control"/>
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-magnet"></i></span>
                                </div>                                                        
                            </div>
                        </div>   
                        <div class="form-group">
                            <div class="col-md-2">Prepend button:</div>
                            <div class="col-md-10">
                                <div class="input-group">
                                    <div class="input-group-btn">
                                        <button class="btn btn-default" type="button">Left</button>
                                    </div>
                                    <input type="text" class="form-control"/>                                
                                </div>                            
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-2">Append button:</div>
                            <div class="col-md-10">
                                <div class="input-group">
                                    <input type="text" class="form-control"/>
                                    <div class="input-group-btn">
                                        <button class="btn btn-default" type="button">Right</button>
                                    </div>
                                </div>                            
                            </div>
                        </div>                                     
                        <div class="form-group">
                            <div class="col-md-2">Both:</div>
                            <div class="col-md-10">
                                <div class="input-group">
                                    <div class="input-group-btn">
                                        <button class="btn btn-default" type="button">Left</button>
                                    </div>                                    
                                    <input type="text" class="form-control"/>
                                    <div class="input-group-btn">
                                        <button class="btn btn-default" type="button">Right</button>
                                    </div>
                                </div>                            
                            </div>
                        </div>

                        <div class="toolbar bottom TAR">
                            <button class="btn btn-primary">Submit</button>
                        </div>

                    </div>                
                </div>
                
            </div>            
            
        </div>
        
        <div class="row">
            
            <div class="col-md-6">
                
                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-pencil3"></i></div>
                        <h2>Custom form elements</h2>
                    </div>                  
                    <div class="block-fluid">

                        <div class="form-group">
                            <div class="col-md-2">Select:</div>
                            <div class="col-md-10">
                                <select name="s_example">
                                    <option value="0">choose a option...</option>
                                    <option value="1">Andorra</option>
                                    <option value="2">Antarctica</option>
                                    <option value="3">Bulgaria</option>
                                    <option value="4">Germany</option>
                                    <option value="5">Dominican Republic</option>
                                    <option value="6">Micronesia</option>
                                    <option value="7">United Kingdom</option>
                                    <option value="8">Greece</option>
                                    <option value="9">Italy</option>
                                    <option value="10">Ukraine</option>                                                                       
                                </select>
                            </div>
                        </div>                    

                        <div class="form-group">
                            <div class="col-md-2">Multiple:</div>
                            <div class="col-md-10">
                                <select name="s_example" multiple="multiple">
                                    <option value="0">choose a option...</option>
                                    <option value="1">Andorra</option>
                                    <option value="2">Antarctica</option>
                                    <option value="3">Bulgaria</option>
                                    <option value="4">Germany</option>
                                    <option value="5">Dominican Republic</option>
                                    <option value="6">Micronesia</option>
                                    <option value="7">United Kingdom</option>
                                    <option value="8">Greece</option>
                                    <option value="9">Italy</option>
                                    <option value="10">Ukraine</option>                                                                       
                                </select>
                            </div>
                        </div>                    

                        <div class="form-group">
                            <div class="col-md-2">Select2:</div>
                            <div class="col-md-10">
                                <select name="s_example" class="select" style="width: 100%;">
                                    <option value="0">choose a option...</option>
                                    <option value="1">Andorra</option>
                                    <option value="2">Antarctica</option>
                                    <option value="3">Bulgaria</option>
                                    <option value="4">Germany</option>
                                    <option value="5">Dominican Republic</option>
                                    <option value="6">Micronesia</option>
                                    <option value="7">United Kingdom</option>
                                    <option value="8">Greece</option>
                                    <option value="9">Italy</option>
                                    <option value="10">Ukraine</option>                                                                       
                                </select>
                            </div>
                        </div>                    

                        <div class="form-group">
                            <div class="col-md-2">Select2 multiple:</div>
                            <div class="col-md-10">
                                <select name="s_example" multiple="multiple" class="select" style="width: 100%;">
                                    <option value="0">choose a option...</option>
                                    <option value="1">Andorra</option>
                                    <option value="2">Antarctica</option>
                                    <option value="3">Bulgaria</option>
                                    <option value="4">Germany</option>
                                    <option value="5">Dominican Republic</option>
                                    <option value="6">Micronesia</option>
                                    <option value="7">United Kingdom</option>
                                    <option value="8">Greece</option>
                                    <option value="9">Italy</option>
                                    <option value="10" selected="selected">Ukraine</option>                                                                       
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-2">Tags input:</div>
                            <div class="col-md-10">
                                <input type="text" class="tags" value="PHP,JavaScript,CSS,HTML"/>
                            </div>
                        </div>                    

                        <div class="form-group">
                            <div class="col-md-2">Checkbox:</div>
                            <div class="col-md-10">
                                <input type="checkbox" checked="checked" value="1"/>Checked 
                                <input type="checkbox" value="2"/>Unchecked 
                                <input type="checkbox" checked="checked" disabled="disabled" value="3"/>Disabled
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-2">Radio:</div>
                            <div class="col-md-10">
                                <input type="radio" checked="checked" name="r_example" value="1"/>Checked 
                                <input type="radio" name="r_example" value="2"/>Unchecked 
                                <input type="radio" checked="checked" disabled="disabled" name="r_example_1" value="3"/>Disabled 
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-2">File:</div>
                            <div class="col-md-10">                            
                                <div class="input-group file">
                                    <input type="file" name="file"/>
                                    <input type="text" class="form-control"/>
                                    <div class="input-group-btn">
                                        <button class="btn btn-default">Browse</button>
                                    </div>
                                </div>                            
                            </div>
                        </div>   
                        
                        <div class="form-group">
                            <div class="col-md-2">Spinner:</div>
                            <div class="col-md-4">                                                            
                                <input type="text" class="form-control" name="spi" id="spinner" value="1"/>
                            </div>
                            <div class="col-md-2">Currency:</div>
                            <div class="col-md-4">                                                            
                                <input type="text" class="form-control" name="sp" id="spinner1" value="5"/>
                            </div>                            
                        </div>                         
                        
                        <div class="form-group">
                            <div class="col-md-2">Datepicker:</div>
                            <div class="col-md-10">                                                            
                                <input type="text" class="datepicker form-control"/>
                            </div>
                        </div>                                                 
                        
                        
                        <div class="toolbar bottom TAR">
                            <button class="btn btn-primary">Submit</button>
                        </div>                    
                    </div>
                </div>
                   
            </div>
            
            <div class="col-md-6">
                
                <div class="widget">
                    <div class="head">
                        <div class="icon"><i class="icosg-pencil"></i></div>
                        <h2>Other text inputs</h2>
                    </div>                   
                    <div class="block-fluid">

                        <div class="form-group warning">
                            <div class="col-md-2">Warning</div>
                            <div class="col-md-10">
                                <span class="help-block">Lorem ipsum dolor sit amet</span>
                                <input type="text" class="form-control"/>
                            </div>
                        </div>

                        <div class="form-group error">
                            <div class="col-md-2">Error</div>
                            <div class="col-md-10">
                                <input type="text" class="form-control"/>
                                <span class="help-block">Lorem ipsum dolor sit amet</span>
                            </div>
                        </div>

                        <div class="form-group success">
                            <div class="col-md-2">Success</div>
                            <div class="col-md-10">
                                <input type="text" class="form-control"/>                            
                            </div>
                        </div>                    

                        <div class="form-group info">
                            <div class="col-md-2">Info</div>
                            <div class="col-md-10">
                                <input type="text" class="form-control"/>
                            </div>
                        </div>                                        

                        <div class="form-group">
                            <div class="col-md-2">Custom length</div>
                            <div class="col-md-10">                            
                                <div><input class="input-mini form-control" type="text" placeholder=".input-mini 30%"/></div>
                                <div><input class="input-small form-control" type="text" placeholder=".input-small 40%"/></div>
                                <div><input class="input-medium form-control" type="text" placeholder=".input-medium 50%"/></div>
                                <div><input class="input-large form-control" type="text" placeholder=".input-large 60%"/></div> 
                                <div><input class="input-xlarge form-control" type="text" placeholder=".input-xlarge 70%"/></div> 
                                <div><input class="input-xxlarge form-control" type="text" placeholder=".input-xxlarge 80%"/></div>                             
                                <div><input class="input-huge form-control" type="text" placeholder=".input-huge 90%"/></div>
                            </div>
                        </div>
                        <div class="toolbar bottom TAL">
                            <button class="btn btn-primary">Submit</button>
                        </div>                        
                    </div>
                </div>
            </div>
            
        </div>
        
        <div class="row">
            
            <div class="col-md-6">
                
                <div class="widget">
                    <div class="head dark">
                        <div class="icon"><i class="icos-lab"></i></div>
                        <h2>Masked inputs</h2>
                    </div>                  
                    <div class="block-fluid">

                        <div class="form-group">
                            <div class="col-md-2">Date:</div>
                            <div class="col-md-10">
                                <input type="text" class="mask_date form-control" value=""/>
                                <span class="help-block">Example: 2012-12-21</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-2">Phone:</div>
                            <div class="col-md-10">
                                <input type="text" class="mask_phone form-control" value=""/>
                                <span class="help-block">Example: 98 (765) 432-10-98</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-2">Phone + Ext:</div>
                            <div class="col-md-10">
                                <input type="text" class="mask_phone_ext form-control" value=""/>
                                <span class="help-block">Example: 98 (765) 432-10-98 x9999</span>
                            </div>
                        </div>                    

                        <div class="form-group">
                            <div class="col-md-2">Credit:</div>
                            <div class="col-md-10">
                                <input type="text" class="mask_credit form-control" value=""/>
                                <span class="help-block">Example: 9876-5432-1098-7654</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-2">TIN:</div>
                            <div class="col-md-10">
                                <input type="text" class="mask_tin form-control" value=""/>
                                <span class="help-block">Example: 98-7654321</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-2">SSN:</div>
                            <div class="col-md-10">
                                <input type="text" class="mask_ssn form-control" value=""/>
                                <span class="help-block">Example: 987-65-4321</span>
                            </div>
                        </div>                    
                        <div class="form-group">
                            <div class="col-md-2">Product:</div>
                            <div class="col-md-10">
                                <input type="text" class="mask_product form-control" value=""/>
                                <span class="help-block">Example: A1-234-B567</span>
                            </div>
                        </div>                       

                        <div class="form-group">
                            <div class="col-md-2">Percent:</div>
                            <div class="col-md-10">
                                <input type="text" class="mask_percent form-control" value=""/>
                                <span class="help-block">Example: 50%</span>
                            </div>
                        </div>                            

                        <div class="toolbar bottom TAC">
                            <button class="btn btn-primary">Submit</button>
                        </div>                    

                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="widget">
                    <div class="head">
                        <div class="icon"><i class="icosg-reply1"></i></div>
                        <h2>Multiselect</h2>
                    </div>                  
                    <div class="block-fluid">

                        <div class="form-group">
                            <div class="col-md-12">
                                <span class="top title">Default:</span>
                                <select name="ms_example" multiple="multiple" id="ms">
                                    <option value="0">choose a option...</option>
                                    <option value="1">Andorra</option>
                                    <option value="2">Antarctica</option>
                                    <option value="3">Bulgaria</option>
                                    <option value="4" selected="selected">Germany</option>
                                    <option value="5">Dominican Republic</option>
                                    <option value="6">Micronesia</option>
                                    <option value="7">United Kingdom</option>
                                    <option value="8">Greece</option>
                                    <option value="9">Italy</option>
                                    <option value="10" selected="selected">Ukraine</option>                                                                       
                                </select>
                            </div>
                        </div>                    

                        <div class="form-group">
                            <div class="col-md-12">
                                <span class="top title">With controls:</span>                        
                                <select name="ms_example" multiple="multiple" id="msc">
                                    <option value="0">choose a option...</option>
                                    <option value="1">Andorra</option>
                                    <option value="2">Antarctica</option>
                                    <option value="3">Bulgaria</option>
                                    <option value="4">Germany</option>
                                    <option value="5" selected="selected">Dominican Republic</option>
                                    <option value="6">Micronesia</option>
                                    <option value="7">United Kingdom</option>
                                    <option value="8">Greece</option>
                                    <option value="9">Italy</option>
                                    <option value="10" selected="selected">Ukraine</option>                                                                       
                                </select>
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-primary" id="ms_select">Select all</button>
                                    <button class="btn btn-sm btn-primary" id="ms_deselect">Deselect all</button>
                                </div>
                            </div>
                        </div>                    

                        <div class="toolbar bottom TAC">
                            <button class="btn btn-primary">Submit</button>
                        </div>  
                        
                    </div>
                </div>
            </div>
            
        </div>
        
    </div>  

</body>
</html>
